<template>
	<view :style="{marginTop: statusBarHeight + 'px', height: titleBarHeight + 'px'}" class="position-relative box-border" style="z-index: 100;">
		<!-- <view class="d-flex a-center j-sb h-84 font-30" :style="[{color},{paddingTop}]">
			<text class="iconfont icon-xiangzuojiantou font-24"></text>
			<view class="title">
				{{title}}
			</view>
			<view class="">
				
			</view>
		</view> -->
		<!-- #ifdef MP-WEIXIN -->
		<view :style="{height: titleBarHeight + 'px'}" class="uni-page-head d-flex a-center j-sb" style="color: rgb(0, 0, 0);">
			<!-- <view @click="navigateAction('index')" class="uni-btn-icon" style="color: rgb(0, 0, 0); font-size: 27px;"></view> -->
			<text @click="navigateAction('index')" class="iconfont icon-xiangzuojiantou font-40 font-weight ml-16"></text>
			<view class="uni-page-head-bd">
				<view class="uni-page-head__title" style="font-size: 16px; opacity: 1;">
					{{title}}
				</view>
			</view>
			<view class="uni-btn-icon" style="color: transparent; font-size: 27px;"></view>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view :style="{height: titleBarHeight + 'px'}" class="uni-page-head d-flex a-center j-sb" style="color: rgb(0, 0, 0);">
			<!-- <view @click="navigateAction('index')" class="uni-btn-icon" style="color: rgb(0, 0, 0); font-size: 27px;"></view> -->
			<text @click="navigateAction('index')" class="iconfont icon-xiangzuojiantou font-40 font-weight ml-16"></text>
			<view class="uni-page-head-bd">
				<view class="uni-page-head__title" style="font-size: 16px; opacity: 1;">
					{{title}}
				</view>
			</view>
			<view class="uni-btn-icon" style="color: transparent; font-size: 27px;"></view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="uni-page-head d-flex a-center h-84 j-sb position-absolute left-0 w-100" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); border: 1px solid red;">
			<!-- <view @click="navigateAction('index')" class="uni-btn-icon" style="color: rgb(0, 0, 0); font-size: 27px;"></view> -->
			<text @click="navigateAction('index')" class="iconfont icon-xiangzuojiantou font-40 font-weight ml-16"></text>
			<view class="uni-page-head-bd">
				<view class="uni-page-head__title" style="font-size: 16px; opacity: 1;">
					{{title}}
				</view>
			</view>
			<view class="uni-btn-icon" style="color: transparent; font-size: 27px;"></view>
		</view>
		<!-- #endif -->
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				height: 0, 
				paddingTop: 0,
				
				statusBarHeight: 0,
				titleBarHeight: 45,
				headerHeight: 0
			}
		},
		// props: ["title", "back"],
		props:{
			title:{ // 标题文字(默认为空)
				type:String,
				default:''
			},
			color:{ // 标题和返回按钮颜色(默认白色)
				type:String,
				default:'#000000'
			},
            //建议使用background  因为使用backgroundColor，会导致不识别渐变颜色
			background:{ // 背景颜色(不传值默认透明)
				type:String,
				default:'transparent'
			},
			back:{ // 是否显示返回按钮(不传值默认不显示)
				type:Boolean,
				default:false
			},
		},
		onLoad() {
			
		},
		created() {
			// const demo = uni.getMenuButtonBoundingClientRect()
			// this.height = demo.height + "px"
			// this.paddingTop = demo.top + "px"
			this.getSystemStatusBarHeight();
			
			
		},
		methods: {
			//默认跳转操作
			navigateAction: function(alias, requestParams = {}, action = 'navigate', authenticate = false, animationType =
				'slide-in-right') {
				//设置对象
				let that = this;
				if (alias == '') {
					that.nii_common.toastAlert('即将开放');
				} else {
					//跳转页面
					that.nii_common.navigate.action(alias, requestParams, action, authenticate, animationType);
				}
			},
			//获取众益健康状态栏高度
			getSystemStatusBarHeight:function(){
				let that = this;
				that.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			    // #ifdef APP-PLUS
			    // var height = plus.navigator.getStatusbarHeight();
			    // that.barHeight = height + 'px';
			    // #endif
			    // #ifdef H5
			    that.barHeight = 0;
			    // #endif
				// #ifdef MP-WEIXIN
				//1.得到 状态栏高度，单位：px
				//2.计算 标题栏高度，单位：px，计算公式：小胶囊高度 + (顶部距离 - 状态栏高度) * 2
				that.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - that.statusBarHeight) * 2 + uni.getMenuButtonBoundingClientRect().height;
				//3.计算 页面头部高度，单位：px，计算公式：导航栏高度 + 状态栏高度
				that.headerHeight = that.statusBarHeight + that.titleBarHeight;
				/* 或：
				const SystemInfo = wx.getSystemInfoSync();
				this.statusBarHeight = SystemInfo.statusBarHeight;
				*/
				// #endif
				
				console.log(that.statusBarHeight, that.titleBarHeight);
			},
			// 左侧返回按钮调用
			onBack() {
				this.$emit("onBack")
			},
		}
	}
</script>
<style lang="less">
	.demo {
		position: relative;//注意，建议使用相对定位，因为固定定位会脱离文档流，然后你还要去设置marginTop值
		// position: fixed;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		z-index: 100;
		padding-bottom: 10rpx;
 
		.left {
			float: left;
			position: absolute;
			width: 100rpx;
			height: 50rpx;
			top: 0;
			bottom: 0;
			left: 20rpx;
			color: #fff;
			margin: auto;
		}
 
		.title {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			// color: #FFFFFF;
		}
	}
</style>